<template>
    <div class="class-box">
        <nut-tabs v-model="tab" direction="vertical" title-scroll style="" name="tabName" @change="tabChange">
            <nut-tab-pane v-for="item in list" :key="item" :title="`${item.label}`" :pane-key="item">
                <nut-grid :column-num="3" square :border="false">
                    <nut-grid-item :text="item.project_Name" v-for="item in serviceList" style="height: 220rpx;"
                        @click="jumpTo('/packageA/pages/detail/index?id=' + item.ID)">
                        <nut-avatar size="large">
                            <img :src="item.remark" alt="">
                        </nut-avatar>
                    </nut-grid-item>
                </nut-grid>
            </nut-tab-pane>
        </nut-tabs>
    </div>
</template>
<script lang="ts">
import { reactive, toRefs, onMounted } from 'vue'
import Taro, { useRouter } from '@tarojs/taro'
import { getIndexClass, getIndexService } from '../../../../api/index'
export default {
    components: {

    },
    setup() {
        const state = reactive({
            list: [] as any,
            tab: 0 as any,
            serviceList: [],
        });
        const jumpTo = (path) => {
            Taro.navigateTo({ url: path })
        }
        onMounted(() => {
            getData()
            getClass()
            const router = useRouter();
            if (router.params.id) {
                state.tab = router.params.id
                console.log(Number(router.params.id))
                console.log(state.list)
                let i = Number(router.params.id)
                setTimeout(() => {
                    getList({ pageType: state.list[i].value })
                }, 500);
            } else {
                getList('')
            }
        });
        const getData = () => {

        }
        const getList = (data) => {
            getIndexService(data).then(res => {
                if (res.code == 0) {
                    state.serviceList = res.data.list
                }
            })
        }
        const getClass = () => {
            getIndexClass({ ID: 12 }).then(res => {
                if (res.code == 0) {
                    state.list = [{ label: '全部', value: '' }, ...res.data.resysDictionary.sysDictionaryDetails]
                }
            })
        }
        const tabChange = (e) => {
            getList({ pageType: state.list[e.paneKey].value })
        }
        return {
            ...toRefs(state), jumpTo, getClass, getList, tabChange
        };
    }
};
</script>
<style lang="scss">
.class-box {}
</style>